<template>
  <div class="custom-box">
    <div class="custom-left">
      <div class="custom-photo">
        <img :src="curTypePhoto" alt="" />
      </div>
      <div class="person-type">{{ curPersonType }}</div>
      <div class="work-item-switch type-switch">
        <je-dropdown
          placement="bottomRight"
          :trigger="['click']"
          :get-popup-container="popupContainer"
        >
          <span class="type-switch-name" @click.prevent>切换</span>
          <DownOutlined />
          <template #overlay overlayStyle>
            <je-menu>
              <je-menu-item
                v-for="item in personTypeList"
                :key="item.value"
                :class="{ 'person-type-foucs': curPersonType == item.label }"
              >
                <span @click="handlePersonType(item.value)">{{ item.label }}</span>
              </je-menu-item>
            </je-menu>
          </template>
        </je-dropdown>
      </div>
      <div class="time-swicth-box">
        <div class="time-label">
          <i class="fal fa-alarm-clock"></i>
          <span>时间:</span>
        </div>
        <!-- 选择周 -->
        <div v-show="!focusWeek" class="date-switch" @click="handlefoucsWeek"> {{ curWeek }} </div>
        <div v-show="focusWeek" class="work-item-switch date-switch week-switch">
          <je-dropdown
            placement="bottomRight"
            :trigger="['click']"
            :get-popup-container="popupContainer"
            @click="handleVisibleWeek"
          >
            <span class="date-select">
              <span class="date-label">{{ curWeek }}</span>
              <span class="date-arrow"></span>
            </span>
            <DownOutlined />
            <template #overlay overlayStyle>
              <je-menu>
                <je-menu-item
                  v-for="item in weekList"
                  :key="item.value"
                  :class="{ 'person-type-foucs': curWeek == item.label }"
                  @click="handleWeek(item.label)"
                >
                  <span>{{ item.label }}</span>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
        <!-- 选择月 -->
        <div v-show="!focusMonth" class="date-switch" @click="handlefoucsMonth">
          {{ curMonth }}
        </div>
        <div v-show="focusMonth" class="work-item-switch date-switch week-switch">
          <je-dropdown
            placement="bottomRight"
            :trigger="['click']"
            :get-popup-container="popupContainer"
            @click="handleVisibleMonth"
          >
            <span class="date-select">
              <span class="date-label">{{ curMonth }}</span>
              <span class="date-arrow"></span>
            </span>
            <DownOutlined />
            <template #overlay overlayStyle>
              <je-menu>
                <je-menu-item
                  v-for="item in monthList"
                  :key="item.value"
                  :class="{ 'person-type-foucs': curMonth == item.label }"
                  @click="handleMonth(item.label)"
                >
                  <span>{{ item.label }}</span>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
        <!-- 选择季度 -->
        <div v-show="!focusQuarter" class="date-switch" @click="handlefoucsQuarter">
          {{ curQuarter }}
        </div>
        <div v-show="focusQuarter" class="work-item-switch date-switch quarter-switch">
          <je-dropdown
            placement="bottomRight"
            :trigger="['click']"
            :get-popup-container="popupContainer"
            @click="handleVisibleQuarter"
          >
            <span class="date-select">
              <span class="date-label">{{ curQuarter }}</span>
              <span class="date-arrow"></span>
            </span>
            <DownOutlined />
            <template #overlay overlayStyle>
              <je-menu>
                <je-menu-item
                  v-for="item in quarterList"
                  :key="item.value"
                  :class="{ 'person-type-foucs': curQuarter == item.label }"
                  @click="handleQuarter(item.label)"
                >
                  <span>{{ item.label }}</span>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
      </div>
      <div class="custom-date">
        <je-switch
          v-model:value="customState"
          class="opera-status"
          mode="checkbox"
          :label="info.customDate"
        />
        <div
          class="custom-time"
          :class="{ 'custom-time-select': customState == 1 }"
          @click="handleRangeDate"
        >
          {{ curTime }}
        </div>
        <je-range-picker
          v-model:value="rangeDate"
          :locale="locale"
          :open="showRangeDate"
          :placeholder="['开始日期', '结束日期']"
          class="range-date-picker"
          :bordered="false"
          :get-popup-container="popupContainer"
          @change="changeRange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, toRefs, reactive, watch } from 'vue';
  import { useI18n } from '@common/locales';
  import { Switch } from '@jecloud/ui';
  import { DownOutlined } from '@ant-design/icons-vue';
  import companyPhoto from '@/assets/company-photo.png';
  import personPhoto from '@/assets/person-photo.png';
  import locale from 'ant-design-vue/lib/date-picker/locale/zh_CN';
  import { DatePicker } from '@jecloud/ui';
  export default defineComponent({
    name: 'WorkCustom',
    components: {
      JeSwitch: Switch,
      JeRangePicker: DatePicker.RangePicker,
      DownOutlined,
    },
    setup() {
      const t = useI18n().t;
      let timeStr = new Date()
        .toLocaleDateString()
        .split('/')
        .map((item) => {
          if (item < 10) {
            return '0' + item;
          } else {
            return item;
          }
        });
      let curPersonType = ref('全公司');
      let customState = ref('0'); //自定义选择时间状态
      const state = reactive({
        info: {
          customDate: t('workBoard.customDate'),
        },
        locale, //时间选择插件中文化
        companyPhoto, //公司头像
        personPhoto, //个人头像
        curTypePhoto: companyPhoto, //默认头像为公司头像
        curWeek: '本周',
        focusWeek: true, //选择周聚焦
        curMonth: '本月',
        focusMonth: false, //选择月聚焦
        curQuarter: '本季度',
        focusQuarter: false, //选择季度聚焦
        focusStr: 'week', //初始化聚焦在选择周
        curTime: `${timeStr[0]}年${timeStr[1]}月${timeStr[2]}日`,
        showRangeDate: false, //显示自定义时间选择框
        rangeDate: null, //自定义时间
        visibleStr: '', //选中的时间选项
        personTypeList: [
          {
            value: 'QGS',
            label: '全公司',
          },
          {
            value: 'WZJ',
            label: '我自己',
          },
        ],
        weekList: [
          {
            value: 'BZ',
            label: '本周',
          },
          {
            value: 'SZ',
            label: '上周',
          },
        ],
        monthList: [
          {
            value: 'BY',
            label: '本月',
          },
          {
            value: 'SY',
            label: '上月',
          },
        ],
        quarterList: [
          {
            value: 'BJD',
            label: '本季度',
          },
          {
            value: 'SYJD',
            label: '上一季度',
          },
        ],
      });
      const methods = {
        popupContainer(triggerNode) {
          return triggerNode.parentNode;
        },
        handlePersonType(typeValue) {
          //切换个人类型
          for (let typeItem of state.personTypeList) {
            if (typeItem.value === typeValue) {
              curPersonType.value = typeItem.label;
              state.curTypePhoto = typeValue == 'QGS' ? companyPhoto : personPhoto;
            }
          }
        },
        handleSelectTime() {
          customState.value = '0';
          state.showRangeDate = false;
        },
        handleVisibleWeek() {
          //控制周选项弹窗显隐
          state.visibleStr = state.visibleStr === '' ? 'week' : '';
        },
        handleWeek(week) {
          //选择周对应时间
          state.curWeek = week;
          state.visibleStr = '';
        },
        handlefoucsWeek() {
          //切换到周菜单
          state.focusMonth = false;
          state.focusQuarter = false;
          state.focusWeek = true;
          state.focusStr = 'week';
          // state.visibleStr = 'week';
          methods.handleSelectTime();
        },
        handleVisibleMonth() {
          //控制月选项弹窗显隐
          state.visibleStr = state.visibleStr === '' ? 'month' : '';
        },
        handleMonth(month) {
          //选择月对应时间
          state.curMonth = month;
          state.visibleStr = '';
        },
        handlefoucsMonth() {
          //切换到月菜单
          state.focusWeek = false;
          state.focusQuarter = false;
          state.focusMonth = true;
          state.focusStr = 'month';
          // state.visibleStr = 'month';
          methods.handleSelectTime();
        },
        handleVisibleQuarter() {
          //控制季度选项弹窗显隐
          state.visibleStr = state.visibleStr === '' ? 'quarter' : '';
        },
        handleQuarter(quarter) {
          //选择季度对应时间
          state.curQuarter = quarter;
          state.visibleStr = '';
        },
        handlefoucsQuarter() {
          //切换到季度菜单
          state.focusWeek = false;
          state.focusMonth = false;
          state.focusQuarter = true;
          state.focusStr = 'quarter';
          // state.visibleStr = 'quarter';
          methods.handleSelectTime();
        },
        handleRangeDate() {
          //选择自定义时间
          if (customState.value == 1) {
            state.showRangeDate = !state.showRangeDate;
          }
        },
        changeRange(dates, dateStrings) {
          //监听时间选择范围
          if (dateStrings) {
            state.showRangeDate = false;
            state.curTime = `${dateStrings[0]}~${dateStrings[1]}`;
          }
        },
      };
      watch(
        () => customState.value,
        (value) => {
          if (value == 1) {
            state.focusWeek = false;
            state.focusMonth = false;
            state.focusQuarter = false;
          } else {
            switch (state.focusStr) {
              case 'week':
                state.focusWeek = true;
                break;
              case 'month':
                state.focusMonth = true;
                break;
              case 'quarter':
                state.focusQuarter = true;
                break;
              default:
                break;
            }
          }
        },
      );
      return {
        curPersonType,
        customState,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .work-item-switch .ant-dropdown .ant-dropdown-content {
    margin-top: 20px;
  }
  .date-switch .ant-dropdown .ant-dropdown-content {
    margin-top: 14px;
  }
  .work-item-switch .ant-dropdown .ant-dropdown-content .ant-dropdown-menu {
    padding: 10px 0;
  }
  .work-item-switch .ant-dropdown .ant-dropdown-content .ant-dropdown-menu-item {
    line-height: 36px;
    padding: 0 20px;
  }
  .work-item-switch .ant-dropdown .ant-dropdown-content .ant-dropdown-menu-item:hover {
    background-color: #ecf5ff;
    color: #66b1ff;
  }
  .work-item-switch .person-type-foucs {
    background-color: #ecf5ff;
    font-weight: 700;
    color: #409eff;
  }
  .custom-box .ant-dropdown .ant-dropdown-content .ant-dropdown-menu-item {
    text-align: center;
  }
  /* .custom-box .week-switch .ant-dropdown {
    width: 80px;
  } */
  .custom-box .quarter-switch .ant-dropdown {
    width: 104px;
  }
</style>
<style scoped lang="less">
  .custom-box {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    .custom-left {
      display: inline-flex;
      align-items: center;
      .custom-photo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .person-type {
        padding: 0 10px;
        font-size: 14px;
        color: #3f3f3f;
      }
      .type-switch {
        width: 82px;
        .type-switch-name {
          cursor: pointer;
          color: @primary-color;
        }
      }
      .time-swicth-box {
        width: 390px;
        display: inline-flex;
        align-items: center;
      }
      .time-label {
        // font-family: 'PingFang SC, PingFang SC-Normal';
        font-size: 14px;
        color: #3f3f3f;
        span {
          padding-left: 5px;
        }
      }
      .date-switch {
        margin-left: 30px;
        cursor: pointer;
        color: #3f3f3f;
        position: relative;
        .date-select {
          height: 28px;
          line-height: 28px;
          padding: 0 16px;
          display: inline-block;
          background-color: @primary-color;
          color: #ffff;
          border-radius: 14px;
          cursor: pointer;
          .date-label {
            font-size: 14px;
            color: #ffffff;
            padding-right: 4px;
          }
          .date-arrow {
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 7px solid #ffffff;
            font-size: 0;
            line-height: 0;
          }
        }
      }
      .date-name {
        font-size: 14px;
        // font-family: 'PingFang SC, PingFang SC-Normal';
        color: #3f3f3f;
      }
      .week-switch {
        // width: 80px;
      }
      .quarter-switch {
        width: 104px;
      }
      .custom-date {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        // font-family: 'PingFang SC, PingFang SC-Normal';
        margin-left: 50px;
        position: relative;
        .custom-time {
          color: rgba(0, 0, 0, 0.42);
        }
        .custom-time-select {
          color: #3f3f3f;
          cursor: pointer;
        }
        .range-date-picker {
          position: absolute;
          visibility: hidden;
          margin-top: 20px;
        }
      }
    }
  }
</style>
